<template>
  <div class="footer-box">
    <div class="footer-content">
      <div class="footer-left">
        <p class="music-link">
          <a href="">服务条款</a>
          <span>|</span>
          <a href="">隐私政策</a>
          <span>|</span>
          <a href="">儿童隐私政策</a>
          <span>|</span>
          <a href="">版权投诉指引</a>
          <span>|</span>
          <a href="">意见反馈</a>
          <span>|</span>
        </p>
        <p class="company-name">
          <span>**********************</span>
          <span>上海小虎工作室：</span>
          <span>浙网文[2021] 123456789号</span>
        </p>
        <p>
          <span>违法和不良信息举报电话：****************</span>
          <span>举报邮箱：****************</span>
        </p>
        <p>
          <span>粤**-************-** 工业和信息化部备案管理系统网站</span>
          <span>浙公网安备 ****************号</span>
        </p>
      </div>
      <div class="footer-right">
        <div class="icon-item icon-one">
          <i></i>
          <span></span>
        </div>
        <div class="icon-item icon-two">
          <i></i>
          <span></span>
        </div>
        <div class="icon-item icon-three">
          <i></i>
          <span></span>
        </div>
        <div class="icon-item icon-four">
          <i></i>
          <span></span>
        </div>
        <div class="icon-item icon-five">
          <i></i>
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.footer-box {
  position: relative;
  height: 172px;
  overflow: hidden;
  border-top: 1px solid #d3d3d3;
  background: #f2f2f2;
  .footer-content {
    width: 980px;
    margin: 0 auto;
    display: flex;
    .footer-left {
      span {
        margin-right: 14px;
        color: #666;
      }
      width: 520px;
      padding-top: 15px;
      line-height: 24px;
      .music-link {
        color: #999;
        cursor: pointer;
        a {
          color: #999;
        }
        span {
          margin: 0 8px 0 10px;
          color: #c2c2c2;
        }
      }
    }
    .footer-right {
      width: 420px;
      display: flex;
      margin-top: 33px;
      .icon-item {
        height: 70px;
        text-align: center;
        width: 60px;
        margin-left: 30px;
        i {
          background: url("./../../assets/imges/footerIcon.png") no-repeat;
          background-size: 110px 552px;
          width: 50px;
          display: block;
          height: 45px;
          margin: 0 auto;
        }
        span {
          background: url("./../../assets/imges/footer-icon-two.png") no-repeat;
          margin-left: -6px;
          width: 52px;
          display: inline-block;
          background-size: 180px 139px;
          margin: 5px 5px 0;
          height: 14px;
        }
        &.icon-one {
          i {
            background-position: -63px -456.5px;
          }
          span {
            background-position: 0 -108px;
            margin-left: -6px;
            width: 72px;
          }
        }
        &.icon-two {
          i {
            background-position: -63px -101px;
          }
          span {
            background-position: -1px -91px;
          }
        }
        &.icon-three {
          i {
            background-position: 0 0;
          }
          span {
            background-position: 0 0;
          }
        }
        &.icon-four {
          i {
            background-position: -60px -50px;
          }
          span {
            background-position: 0 -54px;
          }
        }
        &.icon-five {
          i {
            background-position: 0 -101px;
          }
          span {
            background-position: -1px -72px;
          }
        }
      }
    }
  }
}
</style>